Vue.component("ws",{
    // 自定义vue组件属性 => 标签属性, 操作属性与数据模型一致
    props:["msgs","users"],
    data(){
        return {
            ws: null
        }
    },
    methods:{
        login(uid){
            if(!uid){
                this.$alert("请输入用id");
                return;
            }
            this.ws = new WebSocket("ws/"+uid);
            this.ws.onmessage = data=>{
                let obj = JSON.parse(data.data);
                if(obj.onlines){
                    this.users = obj.onlines;
                    this.$emit("update:users", this.users);
                }
                this.msgs.push({
                    author:obj.author,
                    content:obj.content
                });
                this.$emit("update:msgs", this.msgs);
            }
        },
        send(text){
            if(!text || !this.ws){
                return;
            }
            this.ws.send(text);
        }
    }

})